//获取名字
let fname = document.getElementById('fname')
// console.log(fname);
let span1 = fname.nextElementSibling
//获取密码
let pass = document.getElementById('pass')
// console.log(pass);
let span3 = pass.nextElementSibling
// console.log(span3);

//获取邮箱
let email = document.getElementById('email')
let span4 = email.nextElementSibling

//再次输入密码
let rpass = document.getElementById('rpass')
let span5 = rpass.nextElementSibling
let flag
//判断名字是否为空，是否有数字
fname.onfocus = function () {
    span1.innerHTML = ''
}
fname.onblur = function () {
    let reg = /^[\w]{4,16}$/
    flag = reg.test(fname.value)
    // console.log(flag);
    if (!flag) {
        span1.innerHTML = '用户名由数字、下划线或字母字符组成的4-16字符'
        span1.style.color = 'red'
        return false
    }
    span1.innerHTML = '用户名正确'
    span1.style.color = 'green'
}
//密码不能为空、不能少于6位
pass.onfocus = function () {
    span3.innerHTML = '（至少包含 6 个字符）'
    span3.style.color = 'black'
}
pass.onblur = function () {
    let reg = /^[\S]{6,15}$/
    flag = reg.test(pass.value)
    console.log(flag);
    if (!flag) {
        span3.innerHTML = '请输入正确的密码'
        span3.style.color = 'red'
        return
    }
    span3.innerHTML = '密码正确'
    span3.style.color = 'green'
}
//判断再次输入密码
rpass.onfocus = function () {
    span5.innerHTML = ''
}
rpass.onblur = function () {
    if (!rpass.value) {
        span5.innerHTML = "重复密码不能为空"
        span5.style.color = "red"
        return
    }
    if (rpass.value !== pass.value) {
        span5.innerHTML = "两次密码不一致"
        span5.style.color = "red"
        return
    }
    span5.innerHTML = "重复密码正确"
    span5.style.color = "green"
}
//判断邮箱
email.onfocus = function () {
    span4.innerHTML = '（必须包含 @ 和.字符）'
    span4.style.color = 'black'
}
email.onblur = function () {
    let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|\.net|\.edu)$/
    flag = reg.test(email.value)
    if (!flag) {
        span4.innerHTML = '邮箱格式不正确，如2473121433@qq.com'
        span4.style.color = 'red'
        return
    }
    span4.innerHTML = '邮箱正确'
    span4.style.color = 'green'
}